<template>
	<echartBox title="工程年度对比" width="651px" height="451px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page3ItemBox5",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	methods: {
		// 初始化图表
		initChart() {
			this.buildHorizontalBarChart();
		},
		// 构建水平进度条图表
		buildHorizontalBarChart() {
			let _labelList = this.chartData.map((item) => item.name);
			let _valueList = this.chartData.map((item) => item.value);
			let maxValue = Math.max(..._valueList);
			
			let chartContainer = this.$refs.chart;
			if (!chartContainer || chartContainer.clientWidth === 0 || chartContainer.clientHeight === 0) {
				console.warn('Chart container not ready, skipping chart initialization');
				return;
			}
			let myChart = echarts.init(chartContainer);

			const option = {
				backgroundColor: "transparent",
				tooltip: {
					show: true,
					trigger: "axis", //axis , item
					backgroundColor: "RGBA(0, 49, 85, 1)",
					borderColor: "rgba(0, 151, 251, 1)",
					borderWidth: 1,
					borderRadius: 0,
					textStyle: {
						color: "#BCE9FC",
						fontSize: 16,
						align: "left",
					},
					},
				grid: {
					left: "15%",
					right: "10%",
					bottom: "5%",
					top: "5%",
					containLabel: false,
				},
				xAxis: {
					type: "value",
					show: false,
					max: maxValue,
				},
				yAxis: {
					type: "category",
					data: _labelList,
					inverse: true,
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 18,
						margin: 15,
					},
				},
				series: [
					{
						// 实际数据条
						name: "数据",
						type: "bar",
						barWidth: 7,
						data: _valueList,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 1, 0,
								[
									{ offset: 0, color: "#43729c" },
									{ offset: 1, color: "#37c8fd" }
								]
							),
						},
                        showBackground: true,
                        backgroundStyle: {
                            color: '#012c5f'
                        },
						z: 2,
					},
					{
						// 右侧圆点
						name: "圆点",
						type: "scatter",
						data: _valueList.map((value, index) => [value, index]),
						symbolSize: 14,
						itemStyle: {
							color: "#37c8fd",
							shadowColor: "#37c8fd",
							shadowBlur: 10,
						},
						z: 3,
					},
				],
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>